<template>
	<view class="container">
		<u-navbar title-size="34"  back-icon-color="#292940" :title="isSet ? '设置密码' : '修改密码'" title-color="#292940" :border-bottom="false" placeholder
			 :custom-back="tui.goBack"></u-navbar>
		<view class="form_box pt-3">
			<view class="item">
				<label class="text-36363A fz-32">当前绑定手机号</label>
				<u-input v-model="USER.mobile" :custom-style="customStyle" class="input-box" style="padding: 6px 0;" :border="false"
					 label-width="0" type="text">
				</u-input>
				
			</view>
			<view class="item">
				<label class="text-36363A fz-32">获取验证码</label>
				<u-input v-model="param.verification_code" class="input-box code" style="padding: 6px 0" clearable
					ref="inputPassword" label-width="0" placeholder="请输入验证码"
					placeholder-style="color:#E2E2E5;font-size:32upx" :border="false" clear-size="32"
					type="number" maxlength="6">
				</u-input>
				
				<span class="get-code" @tap="getCode">{{tips}}</span>
				
			</view>
			<view class="item">
				<label class="text-36363A fz-32">{{isSet?'密码':'新密码'}}</label>
				<u-input v-model="param.password" class="input-box" style="padding: 6px 0" clearable
					ref="inputPassword" label-width="0" :placeholder="isSet?'请输入密码':'请输入新密码'" :password-icon="false"
					placeholder-style="color:#E2E2E5;font-size:30upx" :border="false" clear-size="32"
					:type="passwordArry[1].iseye?'text':'password'">
				</u-input>
				<view class="eye-style">
					<image src="/static/login/eye.png" class="eye-img ml-1"
						@tap="passwordArry[1].iseye= false" v-show="passwordArry[1].iseye"></image>
					<image src="/static/login/eyeClose.png" class="eye-img ml-1"
						@tap="passwordArry[1].iseye= true" v-show="!passwordArry[1].iseye"></image>
				</view>
			</view>

			<view class="item">
				<label class="text-36363A fz-32">确认密码</label>
				<u-input v-model="param.password_confirmation" border="bottom" class="input-box" style="padding: 6px 0" clearable
					ref="inputPassword" label-width="0" placeholder="再次确认密码" :password-icon="false"
					placeholder-style="color:#E2E2E5;font-size:30upx" :border="false" clear-size="32"
					:type="passwordArry[2].iseye?'text':'password'">
					
				</u-input>
				<view class="eye-style">
					<image src="/static/login/eye.png" class="eye-img ml-1"
						@tap="passwordArry[2].iseye= false" v-show="passwordArry[2].iseye"></image>
					<image src="/static/login/eyeClose.png" class="eye-img ml-1"
						@tap="passwordArry[2].iseye= true" v-show="!passwordArry[2].iseye"></image>
				</view>
			</view>
			<view class="but-box">
				<u-button class="main-bg family-sc fz-36" :loading="loading" hover-class="none" @tap="save">确认</u-button>
			</view>
		</view>
		<u-verification-code seconds="60" @end="end" changeText="Xs获取" @start="start" ref="uCode"
			@change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				password: '',
				loading:false,
				iseye: false,
				customStyle:{
					color:'#CCCDD5'
				},
				param: {
					verification_code: '',
					password: '',
					password_confirmation: '',
				},
				passwordArry: [{
						"inputType": "password",
						"iseye": false
					},
					{
						"inputType": "password",
						"iseye": false
					},
					{
						"inputType": "password",
						"iseye": false
					}
				],
				isSet:false,
				tips:'发送验证码'
			}
		},
		computed: {
			USER(){
				return this.$store.state.auth.USER
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			end() {
				// this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
			},
			save() {
				if(this.param.verification_code === ''){
					return uni.$u.toast('请输入验证码')
				}
				if(this.param.password === ''){
					return uni.$u.toast('请输入新密码')
				}
				if(this.param.password_confirmation === ''){
					return uni.$u.toast('请输入确认密码')
				}
				if (this.param.password != this.param.password_confirmation) {
					return uni.$u.toast('两次密码不一致')
				}
				this.loading = true
				this.$store.dispatch('auth/updatePassword', this.param).then(res => {
					this.loading = false
					uni.$u.toast('修改成功')
					setTimeout(() => {
						uni.redirectTo({
							url:'/pages/setting/account-security'
						})
					}, 1000)
				}).catch(error=>{
					this.loading = false
				})
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					//进行表单检查
					this.$store.dispatch('auth/smsSendOwn', { mobile: this.USER.mobile }).then(res => {
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}).catch(error => {
						uni.$u.toast(error.data.message)
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #FFFFFF;

		.form_box {
			width: 100%;
			padding: 0 30upx;
			box-sizing: border-box;
			background: #fff;
		}

		.item {
			height: 182upx;
			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 1upx solid rgba(216, 222, 228, .8);
			position: relative;
		}

		.input-box {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			text-align: left;
			margin-top: 10upx !important;
			padding-right:40upx !important;
			input {
				height: 84upx;
				width: calc(100% - 180upx) !important;
				font-size: 32upx;
				
			}
		}
		.code{
			padding-right: 200upx !important;
		}
		.eye-style{
			position: absolute;
			right:0;
			top:132upx;
			.eye-img {
				width: 32upx;
				height: 32upx;
			}
		}

		.u-border-bottom {
			border-color: #eeeeee !important;
		}

		.but-box {
			width: 100%;
			padding: 80upx 0;

			button {
				width: 100%;
				height: 98upx;
				border-radius: 50upx;
				line-height: 98upx;
				font-size: 32upx;
				color: #FFFFFF;
			}

			uni-button:after {
				border: none !important;
			}
		}

	}
	.get-code{
		position: absolute;
		right: 0;
		top: 82%;
		transform: translateY(-50%);
		color: #292940;
	}
</style>
